<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="pageList">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="订单编号" align="center" prop="id" width="150" />
      <el-table-column
        label="商品名称"
        align="center"
        prop="name"
        width="150"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span class="goods-name" @click="handleOpenImg(scope.row.goodsId)">{{
            scope.row.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="平台"
        align="center"
        prop="platformName"
        width="150"
      />
      <el-table-column
        label="购买人账号"
        align="center"
        prop="buyUserName"
        width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="购买人昵称"
        align="center"
        prop="buyNickName"
        width="150"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="购买日期"
        align="center"
        prop="createTime"
        width="100"
      >
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否转让"
        align="center"
        prop="takeoutStatus"
        width="100"
      >
        <template #default="scope">
          <dict-tag
            :options="takeoutStatusList"
            :value="scope.row.takeoutStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="转出人账号"
        align="center"
        prop="takeoutQQ"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="转出人昵称"
        align="center"
        prop="takeoutNickname"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="转让次数"
        align="center"
        prop="takeoutNum"
        width="100"
      />
      <el-table-column
        label="转让日期"
        align="center"
        prop="takeoutTime"
        width="100"
      >
        <template #default="scope">
          <span>{{
            scope.row.takeoutTime
              ? parseTime(scope.row.takeoutTime, "{y}-{m}-{d}")
              : "-"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="是否赞助"
        align="center"
        prop="status"
        width="100"
      >
        <template #default="scope">
          <dict-tag :options="stutasList" :value="scope.row.status" />
        </template>
      </el-table-column>

      <el-table-column
        label="被赞人账号"
        align="center"
        prop="transferQQ"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="被赞人昵称"
        align="center"
        prop="transferNickName"
        width="120"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="商品所属画师"
        align="center"
        prop="painterName"
        width="120"
      />
      <el-table-column
        label="价格"
        align="center"
        prop="salePrice"
        width="100"
      />
      <el-table-column
        label="售卖数量"
        align="center"
        prop="saleSum"
        width="100"
      />

      <el-table-column
        label="订单备注"
        align="center"
        prop="remarks"
        :show-overflow-tooltip="true"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="查看图片" v-model="open1" width="400px" append-to-body>
      <el-image
        style="width: 300px; height: 300px"
        :src="uploadShowUrl + imgSrc"
        :preview-src-list="[uploadShowUrl + imgSrc]"
        :initial-index="0"
        fit="contain"
      />
    </el-dialog>
  </div>
</template>

<script setup name="Order">
import { listOrder } from "@/api/business/order";
import { listGoods, getGoodsDetals } from "@/api/business/goods";
import { defineProps, defineEmits } from "vue";
const { proxy } = getCurrentInstance();
//接受父组件参数
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  queryusername: {
    type: String,
    default: "",
  },
});

// 图片上传地址
const uploadUrl = import.meta.env.VITE_APP_UPLOAD_API + "api/uploadFile/file";
const uploadShowUrl = import.meta.env.VITE_APP_COS_API;

const imgSrc = ref("");
const pageList = ref([]);
const open = ref(false);
const open1 = ref(false);

const loading = ref(true);

const total = ref(0);
const title = ref("");

const useOtherPlatformList = ref([
  { label: "是", value: "是" },
  { label: "否", value: "否" },
]);
// 是否赞助
const statusComList = ref([
  { label: "否", value: 1 },
  { label: "是", value: 2 },
]);

const takeoutStatusList = ref([
  {
    label: "禁止转让",
    value: "2",
    elTagClass: "",
    elTagType: "danger",
  },
  {
    label: "可以转让",
    value: "1",
    elTagClass: "",
    elTagType: "success",
  },
]);
// 赞助状态
const stutasList = ref([
  {
    label: "是",
    value: "2",
    elTagClass: "",
    elTagType: "danger",
  },
  {
    label: "否",
    value: "1",
    elTagClass: "",
    elTagType: "success",
  },
]);
const data = reactive({
  form: {},

  queryParams: {
    pageNum: 1,
    pageSize: 10,
    queryGoodsName: undefined,
    queryPainterName: undefined,
    queryUserName: undefined,
    queryStartEndTime: undefined,
  },
});

const { queryParams, form } = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  listOrder(queryParams.value).then((response) => {
    pageList.value = response.data.rows;
    total.value = response.data.count;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 查询平台列表 */
function handleOpenImg(id) {
  getGoodsDetals(id).then((response) => {
    imgSrc.value = response.data.src;
    open1.value = true;
  });
}

watch(
  () => props.queryusername,
  (newValue, oldValue) => {
    if (newValue) {
      data.queryParams.queryUserName = newValue;
      handleQuery();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="scss" scoped>
.goods-name {
  color: rgb(0, 119, 255);
  cursor: pointer;
}
</style>
